<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="../assets/images/favicon.ico"
    />
    <title>壹脉智能CRM</title>
    <link href="./css/bootstrap.min.css" rel="stylesheet" />
    <link href="./css/perfect-scrollbar.min.css" rel="stylesheet" />
    <link href="css/style.min.css" rel="stylesheet" />
    <link href="css/colors/default.css" id="theme" rel="stylesheet" />
    <link rel="stylesheet" href="css/diy.min.css" />
  </head>

  <body class="fix-header fix-sidebar card-no-border">
    <div class="preloader">
      <div class="loader">
        <div class="loader__figure"></div>
        <p class="loader__label">壹脉</p>
      </div>
    </div>
    <div id="main-wrapper">
      <header class="topbar">
        <nav class="navbar top-navbar navbar-expand-md navbar-light">
          <div class="navbar-header">
            <a class="navbar-brand" href="../index.html">
              <b>
                <img
                  src="../assets/images/diy/yimai.png"
                  alt="homepage"
                  class="dark-logo"
                />
                <!--<img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo"/>-->
              </b>
              <span>
                <span class="fs18 cblue p-l-6 fbold">壹脉智能CRM</span>
              </span>
            </a>
          </div>
          <div class="navbar-collapse">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item">
                <a
                  class="nav-link nav-toggler hidden-md-up waves-effect waves-dark"
                  href="javascript:void(0)"
                  ><i class="sl-icon-menu"></i
                ></a>
              </li>
              <li class="nav-item">
                <a
                  class="nav-link sidebartoggler hidden-sm-down waves-effect waves-dark"
                  href="javascript:void(0)"
                  ><i class="sl-icon-menu"></i
                ></a>
              </li>
            </ul>
            <user-head></user-head>
          </div>
        </nav>
      </header>
      <aside class="left-sidebar">
        <div class="scroll-sidebar">
          <company-position></company-position>
          <nav class="sidebar-nav p-0">
            <c-slider current="17"></c-slider>
          </nav>
        </div>
      </aside>
      <div class="page-wrapper">
        <div class="container-fluid">
          <div class="row page-titles">
            <div class="col-md-5 align-self-center">
              <h3 class="text-themecolor">文章管理</h3>
              <ol class="breadcrumb">
                <li class="breadcrumb-item">
                  <a href="javascript:void(0)">HOME</a>
                </li>
                <li v-if="isDrafts==0" class="breadcrumb-item active">
                  文章管理
                </li>
                <li v-else class="breadcrumb-item active">
                  草稿箱
                </li>
              </ol>
            </div>
          </div>
          <!--列表-->
          <div class="row bgfff">
            <div class="d-flex p-t-20 w100p p-r-31 p-b-17">
              <div class="mr-auto d-flex p-l-30 fs14 cfff lh30 align-cen">
                <div class="m-r-21">
                  <el-button  @click="addType" class="btncss">添加分类</el-button>
                  <input
                    type="text"
                    id="name"
                    style="width: 200px"
                    class="form-control phgray"
                    v-model="keyWord"
                    placeholder="文章标题"
                  />

                  <el-select v-model="essayTypeId" clearable placeholder="请选择分类">
                    <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                  </el-select>

                  <el-date-picker clearable
                          v-model="createTime"
                          type="daterange"  style="width: 390px"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
                  </el-date-picker>
                </div>
                <span
                  class="bgblue p-l-20 p-r-19 bradius4 m-r-10 cfff fs14 lh30"
                  @click="searchPage"
                  >查询</span
                >
              </div>
              <div class="ml-auto d-flex align-cen" v-if="isDrafts==0">
                <a
                  class="bgblue p-l-20 p-r-19 bradius4 m-r-10 cfff fs14 lh30"
                  href="/main/articlesManage.html?isDrafts=1"
                >
                  <span class="bgblue bradius4 cfff fs14 lh30">草稿箱</span>
                </a>
                <a
                  class="bgblue p-l-20 p-r-19 bradius4 m-r-10 cfff fs14 lh30"
                  href="/main/articlesPublish.html"
                >
                  <span class="bgblue bradius4 cfff fs14 lh30">发布文章</span>
                </a>
              </div>
            </div>
            <div class="row w100p p-l-30">

              <el-row style="overflow-x:auto;width: 100%;display:block;">
                <el-table border  highlight-current-row
                          :data="tableData"
                          style="overflow-x:auto;width: 100%;display:block;" >
                  <el-table-column align="center" type="index" width="50" label="序号"> </el-table-column>
                  <el-table-column align="center" style="-webkit-align-items: center;text-overflow:ellipsis;overflow: hidden;white-space: nowrap;-webkit-box-orient: vertical;" prop="title" label="文章标题" width="300" > </el-table-column>
                  <el-table-column align="center" prop="originAuthor" label="来源" > </el-table-column>
                  <el-table-column align="center" prop="essayTypeName" label="分类"> </el-table-column>
                  <el-table-column align="center" prop="createTime" width="160" label="创建时间"> </el-table-column>
                  <el-table-column align="center" prop="shareNum" label="分享次数" width="80"> </el-table-column>
                  <el-table-column align="center" prop="readNum" label="阅读次数"  width="80"> </el-table-column>
                  <el-table-column align="center" prop="readTime" label="阅读时长" width="80"> </el-table-column>
                  <el-table-column align="center" prop="nickeName" label="创建者"> </el-table-column>
                  <el-table-column align="center"  width="140px" label="发布状态"  >
                    <template slot-scope="scope">
                      <el-switch @change="pubStateChange(scope.row)"
                                 v-model="scope.row.isDrafts == 0 "
                                 active-text="发布"
                                 inactive-text="关闭">
                      </el-switch>
                    </template>
                  </el-table-column>

                  <el-table-column align="center" fixed="right" label="操作"  width="170">
                    <template slot-scope="scope">
                      <el-button type="text" @click="toData(scope.row)" size="small">
                        数据
                      </el-button>
                      <el-button type="text" @click="updateArticles(scope.row.dynamicId)" size="small">
                        编辑
                      </el-button>
                      <el-button type="text"  @click="delDynamicInfo(scope.row.dynamicId)" size="small">
                        删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-row>
              <el-row  style="margin-top:10px;">
                <el-pagination
                        layout="total, sizes, prev, pager, next"
                        :current-page="current"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="pageSize"
                        :total="totalCount"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- All Jquery -->
    <!-- ============================================================== -->
    <script src="js/jquery.min.js"></script>
    <!-- Bootstrap popper Core JavaScript -->
    <!-- <script src="../assets/node_modules/bootstrap/js/popper.min.js"></script> -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/perfect-scrollbar.jquery.min.js"></script>
    <script src="js/sidebarmenu.js"></script>
    <!--Custom JavaScript -->
    <script src="js/custom.min.js"></script>
    <script src="js/layer/layer.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/vuejs-datepicker.min.js"></script>
    <script src="js/zh.js"></script>
    <script src="js/config.js"></script><script src="js/extend.js"></script>
    <script>
      $(function() {
        let formatDate = Vue.filter('formatDate');
        var vw = new Vue({
          el: '#main-wrapper',
          components: { vuejsDatepicker },
          // components:{header},
          data: {
            searchKey: '',
            searchCondition: '',
            // 选中列表
            selectRows: [],
            // 员工列表
            lists: [],
            options:[],
            // 总数
            totalCount : 0,
            current: 1 ,
            pageSize:10,
            tableData: [],
            navs_id: '',
            navs: [
              { id: '', label: '全部' },
              { id: '1', label: '待付款' },
              { id: '2', label: '待发货' },
              { id: '3', label: '待收货' },
              { id: '4', label: '已完成' },
              { id: '5', label: '退款/售后' }
            ],
            keyWord: '',
            essayTypeId:'',
            createTime:[],
            language: language,
            isDrafts: '' //是否是查看草稿箱的数据 1为草稿箱 0不为草稿箱
          },
          mounted() {
            this.queryAllType();
            this.isDrafts = $.formatParams(location.href).isDrafts || '';
          },
          methods: {
            addType(){
              window.location.href ="/main/customerEssayType.html";
            },
            pubStateChange(row){
              const setting = {
                data : {
                  dynamicId : row.dynamicId,
                  isDrafts : row.isDrafts == 1 ? 0 : 1
                }
              }
              $.cAjax('/crmPc/companyGoods/updateDynamicState',setting).then(data => {
                layer.msg('操作成功');
                this.searchPage();
              }).catch(function (err) {
              });
            },
            //按公司查询所有服务
            queryAllType(){
              $.cAjax('/crmPc/essayType/queryAllType').then(data => {
                this.options = data;
                this.searchPage();
              }).catch(function (err) {
              });

            },
            toData(row){
              window.location.href ="/main/staffDataDetail.html";
            },
            handleSizeChange(pageSize) {
              this.pageSize = pageSize
              this.searchPage();
            },
            handleCurrentChange(currentPage) {
              this.currentPage = currentPage
              this.searchPage();
            },
            searchPage(){
              const setting = {
                data : {
                  pageSize : this.pageSize,
                  pageNum : this.pageNum,
                  keyWord : this.keyWord,
                  essayTypeId: this.essayTypeId,
                  isDrafts : this.isDrafts ? this.isDrafts == 0 ? true : false : '',
                  startTime : this.createTime && this.createTime.length > 0 ?  formatDate(this.createTime[0], 'yyyy-MM-dd') +" 00:00:00" : '',
                  endTime : this.createTime && this.createTime.length > 0 ?  formatDate(this.createTime[1], 'yyyy-MM-dd') +" 23:59:59" : ''
                }
              }
              $.cAjax('/crmPc/companyGoods/getDynamicInfo',setting).then(data => {
                if(data){
                  this.tableData = data.pageInfo.list;
                  this.totalCount = data.pageInfo.total;
                  this.tableData.forEach(item =>{
                    // item.isDrafts = item.isDrafts == 1 ? true : false
                    const essay = this.options.find(op =>(op.id == item.essayTypeId))
                    item.createTime = formatDate(item.createTime ,'yyyy-MM-dd hh:mm');
                    item.essayTypeName = essay.name;
                    item.title = item.title.length > 20 ? item.title.substring(0,20)+"..." : item.title;
                  })
                }
              }).catch(function (err) {
              });
            },
            delDynamicInfo(dynamicId) {
              layer.confirm(
                '确定要删除这篇文章吗？',
                {
                  skin: 'confirm-class',
                  btn: ['取消', '确定']
                },
                i => {
                  layer.close(i);
                },
                () => {
                  $.cAjax('/crmPc/companyGoods/delDynamicInfo', {
                    data: {
                      dynamicId: dynamicId
                    }
                  }).then(res => {
                    layer.msg('删除成功');
                    this.searchPage();
                  });

                  return false;
                }
              );
            },
            //查看文章详情
            description(id) {
              location.href =
                '/main/articlesPublish.html?id=' +
                id +
                '&status=info&isDrafts=' +
                this.isDrafts;
            },
            updateArticles(id) {
              location.href =
                '/main/articlesPublish.html?id=' +
                id +
                '&status=edit&isDrafts=' +
                this.isDrafts;
            },

            checkAll() {
              this.allChecks = !this.allChecks;
            },
            chooseRow(row) {
              let idx = this.selectRows.indexOf(row);
              if (idx != -1) {
                this.selectRows.splice(idx, 1);
              } else {
                this.selectRows.push(row);
              }
            },
            jumpPage({ currentPage }) {
              this.page = currentPage;
              this.searchPage();
            },
          },
          computed: {
            allChecks: {
              get() {
                return (
                  this.selectRows.length &&
                  this.selectRows.length == this.lists.length
                );
              },
              set(val) {
                if (val) {
                  this.selectRows = [...this.lists];
                } else {
                  this.selectRows = [];
                }
              }
            }
          },
          filters: {
            state2str(refundState, state) {
              let obj = {
                1: {
                  0: '已失效',
                  1: '待付款',
                  2: '待发货',
                  3: '待收货',
                  4: '已完成',
                  5: '取消订单',
                  6: '退款成功'
                },
                2: '退款中',
                3: '退款成功'
              };

              return refundState == 1
                ? obj[refundState][state]
                : obj[refundState];
            }
          }
        });
      });
    </script>
  </body>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="css/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

  <style type="text/css">
    .btncss{
      background-color: #51CDCB;
      border: 1px #51CDCB solid;
      color: white;
      margin-left: 20px;
    }
    tbody tr td {
      text-align: center;
    }
    .is-center{
      text-align: center;
    }
    .el-table th.is-center{
      text-align: -webkit-center;
    }
  </style>
</html>
